import React from 'react'
import ArticleList from '../../../assets/images/article_list_img.jpg'
import HotImage from '../../../assets/images/hot_article_1.jpg'
import {Link} from "react-router-dom";
import './Index.css';

function Index() {
	return (
		<div className="main">
			<div className="article_container">
				<ul className="left_menu">
					<li className="m_item m_item_active"><Link to="#" className="url" style={{color: '#37f'}}>推荐</Link></li>
					<li className="m_item"><Link to="#" className="url">资讯</Link></li>
					<li className="m_item"><Link to="#" className="url">最新文章</Link></li>
					<li className="m_item"><Link to="#" className="url">区块链</Link></li>
					<li className="m_item"><Link to="#" className="url">人工智能</Link></li>
					<li className="m_item"><Link to="#" className="url">云计算</Link></li>
					<li className="m_item"><Link to="#" className="url">大数据</Link></li>
					<li className="m_item"><Link to="#" className="url">前端开发</Link></li>
					<li className="m_item"><Link to="#" className="url">后端开发</Link></li>
					<li className="m_item"><Link to="#" className="url">移动互联</Link></li>
					<li className="m_item"><Link to="#" className="url">职场生活</Link></li>
					<li className="m_item"><Link to="#" className="url">幽默段子</Link></li>
					<li className="m_item"><Link to="#" className="url">其他</Link></li>
				</ul>
				<div className="center_list">
					<div className="article_wrapper">
						<div className="article_list">
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="/home/article" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<to to="#" className="nickName">Java架构师讲师团</to>
											<span className="bottom_tag">
                                                <Link to="/home/classify">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="/home/classify">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="/home/classify">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
										<div className="bottom_createTime">10.14</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="/home/article" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="/home/article" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="/home/article" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="#" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="#" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="#" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
							<div className="article_item">
								<div className="art_img">
									<img src={ArticleList} alt="" />
								</div>
								<div className="art_content">
									<Link to="#" className="art_item_title">
										<p>Go，11岁生日快乐!</p>
									</Link>
									<div className="art_item_collect">
										<span>收藏</span>
									</div>
									<div className="art_item_bottom">
										<div className="bottom_area">
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>238</span>
											</div>
											<Link to="#" className="nickName">Java架构师讲师团</Link>
											<span className="bottom_tag">
                                                <Link to="#">
                                                    <span>Java</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>Go</span>
                                                </Link>
                                                <i className="iconfont">&#xe654;</i>
                                                <Link to="#">
                                                    <span>资讯</span>
                                                </Link>
                                            </span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className="right_menu">
					<div className="hot_article">
						<div className="hot_title">
							<h3>热门文章</h3>
							<div className="hot_more"><Link to="#">更多<i className="iconfont">&#xe626;</i></Link></div>
						</div>
						<ul className="hot_list">
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">看看别人后端API接口写得，那叫一个优雅！</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">基于web的机票管理系统设计与实现（二）</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">Python学习路线</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">策略模式</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">umi.js 一个集成 react 全家桶的框架</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">基于web的机票管理系统设计与实现（一）</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">一款绝对让你惊艳的CSS框架——TailwindCSS</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">go-zero 如何扛住流量冲击（一）</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">每天一道算法题 - 求斐波拉(那)契数列第n项的值</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">朋友入职中软一个月（外包华为）就离职了！</div>
								</Link>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	)
}

export default Index;